<template>
<div>
    <div v-if="isMobile">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4">
                        <el-button class="user-info" type="primary" icon="el-icon-user-solid" circle></el-button>
                    </el-col>
                    <el-col :span="16" class="mobile-title">{{ title }}</el-col>
                    <el-col :span="4">
                        <el-menu :default-active="activePath" class="el-menu-mobile" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="vertical" router collapse>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                </template>
                                <el-menu-item index="/home" @click="changeTitle('首 页', '/home')">首 页</el-menu-item>
                                <el-menu-item index="/articles" @click="changeTitle('文 章', '/articles')">文 章</el-menu-item>
                                <el-menu-item index="/project" @click="changeTitle('项 目', '/project')">项 目</el-menu-item>
                                <el-menu-item index="/timeline" @click="changeTitle('历 程', '/timeline')">历 程</el-menu-item>
                                <el-menu-item index="/message" @click="changeTitle('留 言', '/message')">留 言</el-menu-item>
                                <el-menu-item index="/about" @click="changeTitle('关 于', '/about')">关 于</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
            <el-footer> 杨景的博客 ©2020 Created by LongYin </el-footer>
        </el-container>
    </div>
    <div v-else>
        <el-container class="home-container">
            <!-- 头部 -->
            <el-header>
                <el-row>
                    <el-col :span="8"> </el-col>
                    <el-col :span="9">
                        <el-menu :default-active="activePath" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
                            <el-menu-item index="/home" @click="saveNavState('/home')">首 页</el-menu-item>
                            <el-menu-item index="/articles" @click="saveNavState('/articles')">文 章</el-menu-item>
                            <el-menu-item index="/project" @click="saveNavState('/project')">项 目</el-menu-item>
                            <el-menu-item index="/timeline" @click="saveNavState('/timeline')">历 程</el-menu-item>
                            <el-menu-item index="/message" @click="saveNavState('/message')">留 言</el-menu-item>
                            <el-menu-item index="/about" @click="saveNavState('/about')">关 于</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="7"> </el-col>
                </el-row>
            </el-header>
            <!-- 主体 -->
            <el-container class="main-container">
                <!-- 侧边栏 -->
                <el-aside width="20%">
                    <div class="my-box">
                        <div class="img-and-name">
                            <img src="../assets/logo.png" alt="" />
                            <span>二狗子</span>
                        </div>
                    </div>
                    <div class="tags-title">云标签</div>
                    <div class="tags">
                        <el-button type="info" v-for="(item, index) in tagList" :key="index" @click="toArticel(item)">{{ item.title }}</el-button>
                        <el-button @click="toResume" type="info">简历</el-button>
                    </div>
                </el-aside>
                <el-container>
                    <!-- 内容 -->
                    <el-main>
                        <!-- 路由占位符 -->
                        <router-view></router-view>
                    </el-main>
                    <!-- 页脚 -->
                    <el-footer> 二狗子的博客 ©2020 Created by LongYin </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</div>
</template>

<script>
import {
    isMobileOrPc
} from "../utils/utils.js";
export default {
    data() {
        return {
            // 被激活的链接地址
            activePath: "",
            isMobile: isMobileOrPc(),
            title: "首页",
            tagList: []
        };
    },
    created() {
        this.activePath = window.sessionStorage.getItem("activePath");
        this.title = window.sessionStorage.getItem("title");
        this.getTagList();
    },
    methods: {
        handleTabClick() {},
        changeTitle(name, activePath) {
            this.title = name;
            window.sessionStorage.setItem("activePath", activePath);
            window.sessionStorage.setItem("title", name);
            this.activePath = activePath;
        },
        // 保存链接的激活状态
        saveNavState(activePath) {
            window.sessionStorage.setItem("activePath", activePath);
            this.activePath = activePath;
        },
        // 创建标签云
        getTagList() {
            this.$http.get("/tags").then(res => {
                this.tagList = res.data;
            });
        },
        toArticel(item) {
            this.$router.push({
                path: "/articleDetail",
                query: {
                    title: item.title,
                    content: item.content,
                    createdTime: item.createdTime
                }
            });
        },
        toResume() {
            this.$router.push("/resume");
        }
    }
};
</script>

<style lang="less" scoped>
.home-container {
    height: 100%;
}

.main-container {
    background-image: url("../assets/bg.png");
}

.el-aside {
    background: rgba(205, 212, 211, 0.726);
    opacity: 0.8;
    height: 800px;

    >.tags-title {
        font-size: 20px;
        opacity: 0.7;
        text-align: center;
        margin: 10px 0;
    }

    >.tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .el-button {
            margin: 7px 9px;
        }
    }

    >.my-box {
        width: 100%;
        height: 300px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        >.img-and-name {
            margin: 50px auto;
            height: 150px;
            width: 150px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            background-color: #fff;
            text-align: center;
            font-size: 35px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
                text-align: center;
            }

            span {
                margin-top: 30px;
            }
        }
    }
}

.el-header {
    padding: 0;
    background-color: #545c64;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;

    >.el-row {
        height: 100%;

        >.el-col {
            height: 100%;

            >.el-menu {
                height: 100%;
                display: flex;
                justify-content: space-around;

                >.el-menu-item {
                    height: 100%;
                    line-height: 80px;
                }
            }
        }
    }
}

.el-footer {
    opacity: 0.8;
}

.el-menu-mobile {
    border-right: none;
    width: 100%;
    height: 100%;

    >.el-submenu {
        height: 100%;
        width: 100%;

        /deep/.el-submenu__title {
            line-height: 110px;
            padding: 0;
        }
    }
}

.mobile-title {
    line-height: 120px;
    text-align: center;
    font-size: 60px;
}

.user-info {
    margin: 10px 10px;
    width: 100px;
    height: 100px;
}

.el-footer {
    text-align: center;
    padding: 20px;
    font-weight: bold;
    font-size: 30px;
}

.el-button {
    margin: 5px 5px;
}
</style>
